<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * location对象既是Windows的属性又是document的属性(window.location === document.location)
         * location保存着当前文档的属性信息也保存着把RUL解析后的信息
        */

        // URL解析能访问的对象之后的举例
        console.log(location.hash)
        console.log(location.host) // 服务器名及端口号
        console.log(location.href) // 完整的URL路径
        console.log(location.search) // 获得查询字符串

       /**
        * 查询字符串
        * 虽然location.search可以获得问好之后的所有查询字符串，但是查询参数不是那么容易被利用
       */
      const getQueryStringArgs = () => { 
        // 把开头的问号删掉
        let qs = location.search.length > 0 ? location.search.substring(1) : ''
        let args = {}

        // split()将字符串转为数组
        for (let item of qs.split('&').map(data => data.split('='))) { 
          console.log(item) //  ['usernme', 'song'] ......

          // 取出每个的参数的key和value
          let key = decodeURIComponent(item[0]) // decodeURIComponent()用法是对编码后的数据url进行解码
          let value = decodeURIComponent(item[1]) 

          if (key.length) { 
            args[key] = value
          }
        }
        return args
      }
      let res = getQueryStringArgs()
      console.log(res)  // {usernme: 'song', age: '21'}


      /**
       * URLSearchParams() 
       * 这个构造函数接收一个查询字符串，创建一个实例。这个实例暴露了get()、set()、delete()等方法
      */
     const searchParams = new URLSearchParams(location.search)

     console.log(searchParams)

     console.log(searchParams.has('usernme')) // true
     console.log(searchParams.get('usernme')) // song
     searchParams.set('number', '2022') // 添加一项
     console.log(searchParams.toString()) // usernme=song&age=21&number=2022
     searchParams.delete('username') // 删除一项

     // 支持URLSearchParams()的浏览器也支持迭代其实例

     for (let data of searchParams) { 
      console.log(data) // ['key','value']
     }
    </script>
</body>
</html>